<template>
  <div class="upload-body">
    <el-dialog
      v-model="centerDialogVisible"
      title="请输入支付密码"
      width="50%"
      center
      @close="close"
    >
      <div class="pay-header f-d-c f-j-a-c">
        <span class="pay-header-title">{{
          payInfo.payTitle ? payInfo.payTitle : "购买付费"
        }}</span>
        <div class="pay-header-num">
          <span>￥</span>
          <span>{{ payInfo.price }}</span>
        </div>
      </div>

      <div class="pay-info">
        <div class="f-j-sb-a-c">
          <span>付款方式</span>
          <div class="f-j-a-c">
            <svg-icon name="icon-pay-yuan" class="svg-icon"></svg-icon>
            <span>余额</span>
          </div>
        </div>

        <div class="f-j-sb-a-c" v-if="showGoldName">
          <span>{{ payInfo.goldName }}</span>
          <div>
            <span v-if="!payInfo.isDeduction">未使用{{ payInfo.goldName }}抵扣 </span>
            <span v-else
              >抵扣￥{{ payInfo.maxCredit }}(消耗{{ payInfo.maxGold
              }}{{ payInfo.goldName }})</span
            >
          </div>
        </div>
      </div>

      <!-- 密码输入框 -->
      <div class="pay-input-box f-j-sb-a-c">
        <el-input
          ref="payInputRef"
          type="password"
          class="pay-pwd-input"
          maxLength="6"
          v-model="pwd"
          @focus="inputFocus = true"
          @blur="inputFocus = false"
          :autofocus="true"
        ></el-input>
        <div
          class="pwd-num-box f-j-a-c"
          v-for="index in 6"
          :class="{
            'pwd-num-box-focus': index - 1 == pwd.length && pwd.length <= 6 && inputFocus,
          }"
        >
          <span class="input-cursor"></span>
          <span class="pwd-num-r" v-if="pwd[index - 1]"></span>
        </div>
      </div>

      <!-- 确定按钮 -->
      <div
        class="confirm-btn f-j-a-c"
        :class="{ 'confirm-btn-disabled': pwd.length < 6 }"
        @click="confirm"
      >
        确认支付
      </div>

      <!-- <div class="forget-pwd f-j-a-c">
        <span>忘记支付密码</span>
      </div> -->
    </el-dialog>
  </div>
</template>
<script>
import { toFixedNum } from "@/utils/common.js";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
  ref,
} from "vue";
export default defineComponent({
  props: {
    payInfo: {
      type: Object,
      default: () => {},
    },
    showGoldName: {
      type: Boolean,
      default: true,
    }, //是否显示硬币
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();
    const payInputRef = ref(null);

    let data = reactive({
      centerDialogVisible: false,
      pwd: "", //密码
      inputFocus: false, //输入框获取焦点
    });

    // 打开弹框
    let open = () => {
      data.centerDialogVisible = true;
      data.inputFocus = true;
      proxy.$nextTick(() => {
        payInputRef.value.focus();
      });
    };

    // 取消
    let close = () => {
      data.centerDialogVisible = false;
      data.pwd = "";
    };

    // 确定
    let confirm = () => {
      if (data.pwd.length != 6) return;
      emit("confirm", data.pwd);
      close();
    };

    return {
      payInputRef,
      close,
      confirm,
      open,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.upload-body {
  :deep(.el-dialog.el-dialog--center) {
    border-radius: 20px;
    min-width: 480px;
    max-width: 500px;
  }

  :deep(.el-dialog--center .el-dialog__footer) {
    text-align: right !important;
  }
}

// 顶部金额
.pay-header {
  padding-bottom: 30px;
  border-bottom: 1px solid #ececec;
  font-size: 14px;
  color: #000000;
  .pay-header-title {
    padding-bottom: 10px;
  }
  .pay-header-num {
    font-weight: bold;
    > span:last-child {
      font-size: 24px;
    }
  }
}

// 支付信息
.pay-info {
  font-size: 14px;
  > div {
    padding-top: 20px;
    > span:first-child {
      color: #656f79;
    }
    > div {
      color: #000000;
      .svg-icon {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
    }
  }
}

// 密码输入框
.pay-input-box {
  height: 46px;
  padding: 0 30px;
  margin-top: 30px;
  position: relative;
  width: 100%;

  .pwd-num-box {
    width: 46px;
    height: 46px;
    border-radius: 5px;
    background-color: #f5f6f7;

    .pwd-num-r {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #000000;
    }
  }
  .pwd-num-box-focus {
    box-shadow: 0 0 0 1px #64c8dc inset;

    .input-cursor {
      display: block;
      color: #000000;
      border-left: 1.5px solid;
      height: 16px;
      animation: cursor-blinks 1s infinite steps(1, start);
    }
  }

  .pay-pwd-input {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    opacity: 0;
    :deep(.el-input__wrapper) {
      background: transparent;
      border: 0px;
    }
    :deep(.el-input__inner) {
      height: 46px;
      background: transparent;
    }
  }
}

// 光标动画
@keyframes cursor-blinks {
  0% {
    opacity: 1;
    display: block;
  }

  50% {
    opacity: 0;
    display: none;
  }

  100% {
    opacity: 1;
    display: block;
  }
}

// 确定按钮
.confirm-btn {
  width: calc(100% - 60px);
  height: 42px;
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
  color: #ffffff;
  border-radius: 10px;
  margin: 50px auto 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  &:active {
    opacity: 0.5;
  }
}
.confirm-btn-disabled {
  opacity: 0.5;
}

// 忘记密码
.forget-pwd {
  font-size: 12px;
  color: #64c8dc;
  cursor: pointer;
  &:active {
    opacity: 0.7;
  }
}

// 底部按钮
.dialog-footer {
  font-size: 14px;
  font-weight: bold;
  justify-content: flex-end;
  > div {
    height: 36px;
    width: 80px;
    border-radius: 10px;
    margin-left: 10px;
    cursor: pointer;
    background: #f3f4f5;
    color: #656f79;
    &:active {
      opacity: 0.7;
    }
  }
  .confirm-btn {
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    color: #ffffff;
  }
}
</style>
